<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>商品订单</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/wechat/cons.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/mobiscroll.custom-2.5.2.min.css">
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <script type="text/javascript" src="__JS__/mobiscroll.custom-2.5.2.min.js""></script>
    <style>
     	#contentBox .navBox{
     		height: 44px;
     		line-height: 44px;
     		text-align: center;
    		font-size: 18px;
    		background: #fff;
    		color: #000;
    		position: fixed;
		    z-index: 1000;
		    top: 0;
       	}
     	#contentBox{     		
     		padding-top: 44px;
     	}
     	.history_back {
		    background: url("__IMG__/wechat/back.png") no-repeat;
		    background-size: cover;
		    position: absolute;
		    top: 0;
		    left: 0;
		    height: 44px;
		    width: 44px;
		}
     	.outer{     		
     		overflow: auto;
     		/*border-bottom: 1px solid #ddd;*/
     		background: #fff;
     		margin-top:10px;
     	}
     	.outer p{
     		font-size: 17px;
     		font-weight: 500;
     		padding: 0 20px;
		    height: 25px;
		    line-height: 25px;
		    /*background: aliceblue;*/
		    /*color: darkseagreen;*/
		    background: #FC866F;
    		color: #fff;
     	}
     	
     	.line{     		
     		 border-bottom: 1px solid #ddd; 
     		 padding: 4px 20px;
     	}
     	.lineleft,.lineright{     	
		    min-height:22px;
		    line-height: 22px;
		    overflow: auto;
		    font-size: 15px;
     	}     	
     	.lineleft span:first-child,.lineright span:first-child{
     		float: left;
     	}
     	.lineleft span:last-child,.lineright span:last-child,.contract{
     		float: right;
     	}
     	.contract{
     		width:30vw;
     		height:40vw;
     	}
     	#all{
     		position: relative;
     	}
     	.bigimg{
     		height: 100vh;
     		width: 100vw;
     		position: absolute;
     	}
     	.bigimg img{
     		display: block;
     		width: 70vw;
     		height: 80vh;
     		margin: 10vh auto;
     	}
     	.tableinfo{
     		width: 100%;
     	}
     	.tableinfo th,.tableinfo td{
     		height: 26px;
     		text-align: center;
     		line-height: 26px;
     		border:1px solid #ccc;
     		font-size: 14px;
     	}
     	.tableinfo th{
     		height: 28px;
     		font-size: 15px;
     		line-height: 28px;
     		background: #efefef;
     	}
     	.color_dred{
     		color: darkred;
     	}
     	.reminder{
     		padding: 0 10px;
     		background: #286090;
     		border:0;
     		color: white;
     		border-radius: 2px;
     	}
    </style>
</head>
<body >
	<div id="all">		
		<div id="contentBox">
		    <nav class="navBox">
		        <span>商品订单</span>        
		    </nav>
		    <div class="mainContent">
				<div class="outer One" >			
					<div class="right">
						<p>基本情况</p>	
						<div class="line">
							<div class="lineleft">
								<span>申请人</span>
								<span>{{create.name}}</span>						
							</div>
						</div>
						<div class="line">
							<div class="lineleft">
								<span>申请人职务</span>
								<span>{{create.duty}}</span>
							</div>	
						</div>	
						<div class="line">
							<div class="lineleft">
								<span>负责人</span>
								<span>{{charge.name}}</span>						
							</div>
						</div>
						<div class="line">
							<div class="lineleft">
								<span>负责人职务</span>
								<span>{{charge.duty}}</span>
							</div>	
						</div>
						<div class="line">
							<div class="lineleft">
								<span>时间</span>
								<span>{{order.time | timetrans(1)}}</span>
							</div>	
						</div>
					</div>
				</div>
				<div class="outer One">			
					<div class="right">
						<p>详情</p>			
						<div class="line">
							<div class="lineleft">
								<span>订单编号</span>
								<span>{{order.order_no}}</span>						
							</div>
						</div>
						<table class="tableinfo">
							<tr>
								<th>商品名称</th>
								<th>商品规格</th>
								<th>商品类型</th>
								<th>商品单价</th>
								<th>商品数量</th>
							</tr>
							<tr v-for="list in goods">
								<td>{{list.name}}</td>
								<td>{{list.standard}}</td>
								<td>{{list.type}}</td>
								<td>{{list.price}}</td>
								<td>{{list.num}}</td>
							</tr>
						</table>
						<div class="line">
							<div class="lineright">
								<span>地址:</span>
								<span>{{order.addr}}</span>
							</div>
						</div>
						<div class="line">
							<div class="lineright">
								<span>备注:</span>
								<span>{{order.note}}</span>
							</div>
						</div>
						<div class="line">
							<div class="lineright">
								<span></span>
								<span>总价:&nbsp;&nbsp;<span class="color_dred">￥{{order.acamount}}</span></span>
							</div>
						</div>
					</div>
				</div>
				<div class="outer three">			
					<div class="right">
						<p>审核</p>
						<div class="line"  v-if="!noteshow">
							<div class="lineleft">
								<span>审核进度</span>
								<span>{{jury.curStep}}/{{jury.steps}}</span>						
							</div>					
						</div>
						<div class="line">
							<div class="lineright">
								<span>审核人</span>
								<span>{{juryMan.name}}</span>
							</div>				
						</div>
						<div class="line">
							<div class="lineleft">
								<span>职务</span>
								<span>{{juryMan.duty}}</span>
							</div>					
						</div>
						<div class="line" v-if="noteshow">
							<div class="lineright">
								<span>意见</span>
								<span>{{juryMan.note}}</span>
							</div>				
						</div>
						<div class="line">
							<div class="lineright">
								<span></span>
								<span>结果:&nbsp;&nbsp;<span class="color_dred">{{result}}</span></span>
							</div>				
						</div>						
					</div>
				</div>
				<div class="outer three" v-if="isSend">			
					<div class="right">
						<p>物流信息</p>
						<div class="line" v-if="logistic.logistics!=0">
							<div class="lineleft">
								<span>物流编号</span>
								<span>{{logistic.transport}}</span>						
							</div>					
						</div>
						<div class="line" v-if="logistic.logistics!=0">
							<div class="lineleft">
								<span>发货时间</span>
								<span>{{logistic.stime}}</span>						
							</div>					
						</div>
						<div class="line" v-if="logistic.logistics!=0">
							<div class="lineleft">
								<span>预计到达时间</span>
								<span>{{logistic.arrival_t}}</span>						
							</div>					
						</div>								
						<div class="line">
							<div class="lineleft">
								<span>物流状态</span>
								<span class="color_dred">{{logistic.logistics | checkpro}}</span>						
							</div>					
						</div>	
					</div>
					<div class="line" v-if="logistic.logistics!==2">
						<div class="lineright">
							<span><button class="reminder" @click="reminder" v-if="isSend2">催单</button></span>
							<span v-if="logistic.logistics==1"><button class="reminder" @click="receipt">确认收货</button></span>
							<span v-if="isreceipt"><button class="reminder" style="background: #efefef;color: #666;border:1px solid #ccc;">已收货</button></span>
						</div>				
					</div>					
				</div>
		    </div>
		</div>
	</div>
<script src="__JS__/layer/layer.js"></script>
<script>
	Vue.filter("timetrans",function(date,type){
        var date = new Date(date*1000);//如果date为10位不需要乘1000
        var Y = date.getFullYear();
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());        
        if(type==1){
          return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
        }else if(type==2){
          return Y+"/"+M+"/"+D;
        } else if(type==3){
          return M+"/"+D+" "+h+":"+m;
        }     
      });
	Vue.filter("checkpro",function(data){
		if(data==0){
			return "未发货";
		}else if(data==1){
			return "已发货";
		}else{
			return "已签收";
		}
	})
	
	var str=location.href;
	var str=str.split("id/")[1];
	var ids=str.split(".html")[0];
    var vm = new Vue({
        el:"#all",
        data:{
        	show:false,
        	base:[],
        	charge:[],
        	create:[],
        	goods:[],
        	order:[],
        	jury:[],
        	result:"",
        	noteshow:true,
        	juryMan:[],
        	isSend:true,
        	logistic:{logistics:"0",transport:"",arrival_t:"",stime:""},
        	isreceipt:false,
        	isSend2:true
        },
        methods:{
          	reminder:function(){
          		$.ajax({
          			type:"post",
          			url:"{{:url('manage/Affairorder/reminder')}}",
          			data:{
          				id:ids
          			},
          			success:function(data){
          				var data=JSON.parse(data);
          				
          				if(data.status==1){
          					layer.msg("催单成功！");
          				}else{
          					layer.msg(data.message);
          				}
          			}
          		});
          	},
          	receipt:function(){
          		var _this=this;
          		$.ajax({
          			type:"post",
          			url:"{{:url('wechat/Cons/receipt')}}",
          			data:{
          				id:ids
          			},success:function(data){
          				var data=JSON.parse(data);
          				
          				if(data.status==1){
          				_this.logistic.logistics=2;	
          				_this.isSend2=false;
          				_this.isreceipt=true;
          					layer.msg("收货成功！");
          				}else{
          					layer.msg(data.message);
          				}
          			}
          		});
          	}
        },
        created(){ 
        	
        	var _this=this;
        	$.ajax({
        		type:"post",
        		data:{
        			id:ids
        		},
        		url:"{{:url('manage/Affairorder/orderDetailData')}}",
        		success:function(data){
        			var data=JSON.parse(data);
        			var data=data.data;
        			_this.base=data.base;
        			_this.charge=_this.base.charge;
        			_this.create=_this.base.create;
        			_this.jury=data.jury;
        			if(data.logistic){
        				_this.logistic=data.logistic;
        			}       			
        			_this.juryMan=data.jury.juryMan;
        			//y
        			var order=data.order;
        			console.log(data)
        			_this.order=order;
        			_this.goods=order.goods;
        			if(_this.logistic.logistics==2){
        				_this.isSend=false;
        				_this.isSend2=false;
        			}
        			if(_this.jury.type==-1){
        				_this.result="处理中";
        				_this.isSend=false;
        				_this.isSend2=false;
        				_this.noteshow=false;
        			}else if(_this.jury.type==0){
        				_this.result="未通过";
        				_this.isSend=false;
        				_this.isSend2=false;
        			}else if(_this.jury.type==1){
        				_this.result="通过";
        				_this.isSend=true;
        			}
        			
        			
        			
        		}
        	})
      	},
       
    })

	
    
</script>
</body>
</html>